<template>
	<u-popup :show="show" @close="hide" closeOnClickOverlay :safeAreaInsetBottom="false">
		<sl-page title="选择收货地址" :backPage="false" @navbar:backPage="hide">
			<view class="page__scroll">
				<view class="page__scroll--inner">
					<mescroll-uni ref="addressListScroll" :fixed="false" @init="mescrollInit" @down="downCallback"
						:down="downOption" @up="upCallback" :up="upOption">
						<view class="address" v-for="(item, index) in datas" :key="index">
							<view class="address-inner flex">
								<view class="address__icon flex-middle-center">
									<view class="icon iconfont icon-mendianzhongxin"></view>
								</view>
								<view class="address__main flex-box">
									<view class="address__main-name">
										<view class="-text oneline-hide">{{ item.areaName }}/{{ item.address }}</view>
									</view>
									<view class="address__main-user flex">
										<view class="address__main-consignee">{{ item.consignee }}</view>
										<view class="address__main-phone">{{ item.phone }}</view>
									</view>
								</view>
							</view>
						</view>
					</mescroll-uni>
				</view>
			</view>
			<view slot="actions" class="actions-wrap">
				<view class="btn" @click="handleCreate()">添加地址</view>
			</view>
		</sl-page>
	</u-popup>
</template>

<script>
	import * as Util from '@/utils/index.js';
	import AddressApi from '@/api/address/address.js';
	import MescrollUni from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.vue';
	import Scroll from '@/components/mixins/scroll.js';
	import Constants from '@/constants';

	export default {
		name: 'address-select',
		mixins: [Scroll, Constants],
		components: {
			MescrollUni
		},
		props: {
			visible: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				show: false,
			};
		},
		onShow() {
			this.getPageData();
		},
		methods: {
			getPageData() {
				const app = this;
				app.downCallback();
			},
			//获取收货地址
			loadPage: async function() {
				let res = await AddressApi.query();
				return res.obj || {};
			},
		}
	};
</script>

<style lang="scss" scoped>
	.address {
		margin: 27rpx 30rpx;

		.address-inner {
			border-radius: 20rpx;
			background: rgba(255, 255, 255, 1);
			padding: 18rpx 35rpx 10rpx 30rpx;
		}

		.address__icon {
			.icon {
				font-size: 48rpx;
			}
		}

		.address__main {
			margin-left: 30rpx;
			margin-right: 10rpx;

			.address__main-name {
				height: 35rpx;
				line-height: 35rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 1);
				margin-bottom: 6rpx;
				position: relative;

				.-text {
					line-height: 35rpx;
					font-size: 24rpx;
					font-weight: 400;
					position: absolute;
					left: 0;
					right: 0;
				}
			}

			.address__main-user {
				.address__main-consignee {
					height: 35rpx;
					line-height: 35rpx;
					font-size: 24rpx;
					font-weight: 300;
					color: rgba(0, 0, 0, 1);
				}

				.address__main-phone {
					height: 35rpx;
					line-height: 35rpx;
					font-size: 24rpx;
					font-weight: 300;
					color: rgba(0, 0, 0, 1);
					margin-left: 40rpx;
				}
			}
		}

		.address__ops {
			.address__ops-edit {
				.icon {
					font-size: 35rpx;
				}
			}

			.address__ops-del {
				margin-left: 30rpx;

				.icon {
					font-size: 35rpx;
				}
			}
		}
	}

	.actions-wrap {
		height: calc(166rpx - env(safe-area-inset-bottom));
		text-align: center;
		padding-top: 18rpx;


		.btn {
			width: 480rpx;
			height: 68rpx;
			border-radius: 30rpx;
			background: rgba(255, 255, 255, 1);
			border: 2px solid rgba(219, 59, 42, 1);
			font-size: 30rpx;
			font-weight: 700;
			letter-spacing: 0px;
			line-height: 43.44rpx;
			color: rgba(219, 59, 42, 1);
		}
	}
</style>